{% extends 'car_system/base.html' %}

{% block title %}首页 - 汽车数据分析系统{% endblock %}

{% block content %}
<!-- 欢迎横幅 -->
<div class="jumbotron bg-light p-5 rounded-3 mb-4">
    <h1 class="display-4"><i class="fas fa-car-side text-primary me-2"></i> 欢迎使用汽车数据分析系统</h1>
    <p class="lead">本系统提供汽车销量排行榜数据分析与可视化服务，帮助您了解汽车市场趋势和热门车型</p>
    <hr class="my-4">
    <p>基于大数据分析、爬虫技术和可视化图表，为您呈现最直观的汽车市场数据</p>
    <div class="d-flex">
        <a class="btn btn-primary btn-lg me-2" href="{% url 'car_list' %}" role="button">
            <i class="fas fa-list me-1"></i> 浏览数据
        </a>
        <a class="btn btn-outline-primary btn-lg" href="{% url 'car_charts' %}" role="button">
            <i class="fas fa-chart-line me-1"></i> 查看图表
        </a>
    </div>
</div>

<!-- 统计数据卡片 -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card stats-card bg-primary-light">
            <div class="card-body">
                <div class="stats-icon text-primary">
                    <i class="fas fa-car"></i>
                </div>
                <h2 class="stats-number">{{ car_count }}</h2>
                <p class="stats-title">收录车型数量</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stats-card bg-primary-light">
            <div class="card-body">
                <div class="stats-icon text-primary">
                    <i class="fas fa-trademark"></i>
                </div>
                <h2 class="stats-number">{{ brand_count }}</h2>
                <p class="stats-title">品牌数量</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stats-card bg-primary-light">
            <div class="card-body">
                <div class="stats-icon text-primary">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <h2 class="stats-number">{{ avg_min_price|floatformat:2 }} - {{ avg_max_price|floatformat:2 }}万</h2>
                <p class="stats-title">平均价格区间</p>
            </div>
        </div>
    </div>
</div>

<!-- 热门车型 -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-fire me-2"></i>热门车型排行</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>排名</th>
                        <th>图片</th>
                        <th>车型</th>
                        <th>品牌</th>
                        <th>价格区间</th>
                        <th>月销量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for car in top_cars %}
                    <tr>
                        <td>{{ car.ranks }}</td>
                        <td>
                            {% if car.image %}
                            <img src="{{ car.image }}" alt="{{ car.series_name }}" style="width: 80px; height: 60px; object-fit: cover;" class="rounded">
                            {% else %}
                            <div class="bg-secondary text-white rounded d-flex align-items-center justify-content-center" style="width: 80px; height: 60px;">无图片</div>
                            {% endif %}
                        </td>
                        <td>{{ car.series_name }}</td>
                        <td>{{ car.brand_name }}</td>
                        <td>{{ car.price }}</td>
                        <td>{{ car.count }}</td>
                        <td>
                            <a href="{% url 'car_detail' car.series_id %}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-info-circle"></i> 详情
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center">暂无数据</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer text-end">
        <a href="{% url 'car_list' %}" class="btn btn-primary">
            查看全部 <i class="fas fa-arrow-right ms-1"></i>
        </a>
    </div>
</div>

<!-- 系统功能介绍 -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="display-1 text-primary mb-3">
                    <i class="fas fa-database"></i>
                </div>
                <h4 class="card-title">数据查询</h4>
                <p class="card-text">提供丰富的汽车数据查询功能，支持按品牌、价格等多维度筛选</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="display-1 text-primary mb-3">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <h4 class="card-title">数据可视化</h4>
                <p class="card-text">基于ECharts的数据可视化，直观展示汽车市场销量、价格等数据分布</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="display-1 text-primary mb-3">
                    <i class="fas fa-robot"></i>
                </div>
                <h4 class="card-title">数据爬虫</h4>
                <p class="card-text">采用先进的爬虫技术，自动抓取最新汽车销量数据，保证数据实时性</p>
            </div>
        </div>
    </div>
</div>
{% endblock %} 